<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h1>
            You want to say ： <span class="word"></span><span class="typed-cursor">|</span>
        </h1>
        <div class="saySection">
            <input type="text" class="txtSay" />
            <input type="button" value="Say" class="btnSay" />
        </div>
    </div>
    <script>
        $.fn.extend({
            showTxt(){
                let self=this;
                let flag=true;
                $(".btnSay").on("click",function(){
                    if (flag == false) {
                        return;
                    }
                    flag = false;
                    self.find(".word").text("");

                    var txt = self.find(".txtSay").val();
                    if (txt=="") {
                        return;
                    }
                    var arr = txt.split("");
                    var index = 0;
                    self.find(".typed-cursor").show()
                    self.timer = setInterval(function () {
                        self.find(".word").text(self.find(".word").text() + arr[index]);
                        index++;
                        if (index >= arr.length) {
                            clearInterval(self.timer);
                            self.find(".typed-cursor").hide();
                            flag = true

                        }
                    }, 300)

                })
            }
        })
        $(function(){
            $(".wrap").showTxt()
        })
    </script>
</body>
</html>